<template>
  <div class="test-type-container">
    <!-- Tabs 移到最上面 -->
    <el-tabs v-model="activeMall" type="card">
      <el-tab-pane 
        v-for="mall in mallList" 
        :key="mall.name" 
        :label="mall.label" 
        :name="mall.name"
      >
        <!-- 搜索表单 -->
        <div class="table-search">
          <el-form :inline="true" :model="queryParams" ref="queryForm" class="search-form">
            <!-- 搜索条件容器 -->
            <div class="form-content">
              <!-- 左侧搜索项 -->
              <div class="left-items">
                <el-form-item label="空调指标" prop="name">
                  <el-select 
                    v-model="queryParams.name" 
                    placeholder="请选择空调指标" 
                    clearable 
                    size="small"
                    style="width: 200px"
                  >
                    <el-option 
                      v-for="item in indicatorOptions" 
                      :key="item.value" 
                      :label="item.label" 
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="粒度" prop="granularity">
                  <el-select 
                    v-model="queryParams.granularity" 
                    placeholder="请选择粒度" 
                    clearable 
                    size="small"
                    style="width: 120px"
                  >
                    <el-option 
                      v-for="item in granularityOptions" 
                      :key="item.value" 
                      :label="item.label" 
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="时间" prop="dateRange" class="date-item">
                  <el-date-picker
                    v-model="queryParams.startDate"
                    :type="datePickerType"
                    :picker-options="startDateOptions"
                    placeholder="开始日期"
                    value-format="yyyy-MM-dd"
                    size="small"
                    style="width: 140px"
                  />
                  <span class="date-separator">-</span>
                  <el-date-picker
                    v-model="queryParams.endDate"
                    :type="datePickerType"
                    :picker-options="endDateOptions"
                    placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    size="small"
                    style="width: 140px"
                  />
                </el-form-item>
              </div>

              <!-- 右侧按钮组 -->
              <div class="right-buttons">
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
                  <el-button 
                    icon="el-icon-refresh" 
                    size="small" 
                    @click="resetQuery" 
                    style="background-color:#DC7500; border-color:#DC7500"
                  >重置</el-button>
                  <el-button 
                    icon="el-icon-upload2"
                    size="small" 
                    @click="handleExport"
                    style="background-color:#00AD84; border-color:#00AD84"
                  >导出</el-button>
                </el-form-item>
              </div>
            </div>
          </el-form>
        </div>

        <!-- 主要内容区域 -->
        <div class="content-wrapper">
          <!-- 左侧指标展示 -->
          <div class="left-panel">
            <div class="indicator-card">
              <div class="title">指标统计</div>
              <div class="model-wrapper">
                <img src="@/assets/images/hexagon-base.png" class="base-image" alt="base" />
                <div class="value">4.8</div>
              </div>
              <div class="stats">
                <div class="stat-item gradient-bg">
                  <div class="label">累计能耗：</div>
                  <div class="value">100000 kw-h</div>
                </div>
                <div class="stat-item gradient-bg" style="margin-top:7px">
                  <div class="label">累计冷量：</div>
                  <div class="value">2000 RT</div>
                </div>
              </div>
            </div>
            
            <!-- 新增的指标评价卡片 -->
            <div class="evaluation-card">
              <div class="title">指标评价</div>
              <div class="evaluation-content">
                <div class="evaluation-item">
                  <span class="label">采用新技术</span>
                  <span class="value">(5.45及以上)</span>
                </div>
                <div class="evaluation-item">
                  <span class="label">优秀</span>
                  <span class="value">(4.7-5.45)</span>
                </div>
                <div class="evaluation-item">
                  <span class="label">良好</span>
                  <span class="value">(4.15-4.7)</span>
                </div>
                <div class="evaluation-item">
                  <span class="label">普通</span>
                  <span class="value">(3.5-4.15)</span>
                </div>
                <div class="evaluation-item">
                  <span class="label">急需改善</span>
                  <span class="value">(3.5及以下)</span>
                </div>
              </div>
            </div>

            <!-- 新增的指标分析卡片 -->
            <div class="analysis-card">
              <div class="title">指标分析</div>
              <div class="analysis-content">
                当前系统制冷性能系数为4.8，位于4.7-5.45区间内，评价为优秀,请继续保持
              </div>
            </div>
          </div>

          <!-- 右侧图表区域 -->
          <div class="right-panel">
            <!-- 折线图 -->
            <div class="chart-wrapper">
              <line-chart :chart-data="chartData" />
            </div>

            <!-- 峰谷值信息 -->
            <div class="peak-valley-info">
              <div class="info-title">峰谷值</div>
              <div class="info-content">
                EER 最大值为 2889.7，时间为 2024-01-11 02:00:00，最小值为 1889.7，时间为 2024-01-11 02:00:00
              </div>
            </div>

            <!-- 新增数据表格 -->
            <div class="data-table">
              <el-table
                :data="tableData"
                style="width: 100%"
                :header-cell-style="{ background: 'rgba(6, 24, 50, 0.8)', color: '#FFFFFF' }"
                :cell-style="{ background: 'rgba(6, 24, 50, 0.8)', color: '#FFFFFF' }"
              >
                <el-table-column
                  prop="time"
                  label="时间"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="power"
                  label="用电量 (KW·h)"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="cooling"
                  label="冷量 (RT)">
                </el-table-column>
                <el-table-column
                  prop="eer"
                  label="EER">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import LineChart from './components/LineChart.vue'
import { mallList } from '@/config/mallConfig'

export default {
  name: 'TestType',
  components: {
    LineChart
  },
  data() {
    return {
      activeMall: 'jordan', // 当前选中的商场
      mallList, // 商场列表
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 类型表格数据
      typeList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: '1', // 默认选择 EER
        granularity: 'month', // 默认选择月粒度
        startDate: undefined,
        endDate: undefined
      },
      // 添加下拉选项数据
      indicatorOptions: [
        { value: '1', label: 'EER' },
        { value: '2', label: 'COP' },
        { value: '3', label: '冷却泵功效' },
        { value: '4', label: '冷冻泵功效' }
      ],
      // 添加粒度选项
      granularityOptions: [
        { value: 'day', label: '日' },
        { value: 'month', label: '月' },
        { value: 'year', label: '年' }
      ],
      // 图表数据
      chartData: {
        xData: ['2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06', 
                '2024-07', '2024-08', '2024-09', '2024-10', '2024-11', '2024-12'],
        values: [1000, 1200, 900, 1500, 2500, 1700, 1400, 1800, 4500, 2000, 1600, 1200],
        peaks: [
          { coord: [8, 4500], value: 4500, type: 'max' },
          { coord: [2, 1200], value: 1200, type: 'min' }
        ]
      },
      // 表格数据
      tableData: [
        {
          time: '2024-01-01',
          power: '12',
          cooling: '5',
          eer: '7'
        },
        {
          time: '2024-01-01',
          power: '12',
          cooling: '5',
          eer: '8'
        },
        {
          time: '2024-01-01',
          power: '13',
          cooling: '8',
          eer: '6'
        },
        {
          time: '2024-01-01',
          power: '11',
          cooling: '2',
          eer: '5'
        }
      ]
    }
  },
  watch: {
    activeMall() {
      // 重置查询参数
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        name: '1', // 重置时也默认选择 EER
        granularity: 'month', // 重置时也默认选择月
        startDate: undefined,
        endDate: undefined
      }
      
      // 重置图表数据
      this.chartData = {
        xData: ['2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06', 
                '2024-07', '2024-08', '2024-09', '2024-10', '2024-11', '2024-12'],
        values: [1000, 1200, 900, 1500, 2500, 1700, 1400, 1800, 4500, 2000, 1600, 1200],
        peaks: [
          { coord: [8, 4500], value: 4500, type: 'max' },
          { coord: [2, 1200], value: 1200, type: 'min' }
        ]
      }
      
      // 重置表格数据
      this.tableData = [
        {
          time: '2024-01-01',
          power: '12',
          cooling: '5',
          eer: '7'
        },
        {
          time: '2024-01-01',
          power: '12',
          cooling: '5',
          eer: '8'
        },
        {
          time: '2024-01-01',
          power: '13',
          cooling: '8',
          eer: '6'
        },
        {
          time: '2024-01-01',
          power: '11',
          cooling: '2',
          eer: '5'
        }
      ]
    },
    // 监听粒度变化，更新日期选择器的配置
    'queryParams.granularity'(val) {
      // 重置日期
      this.queryParams.startDate = undefined
      this.queryParams.endDate = undefined
    }
  },
  mounted() {
    // 移除这里的 initChart
  },
  beforeDestroy() {
    // 移除这里的 chart 清理
  },
  computed: {
    datePickerType() {
      const typeMap = {
        day: 'date',
        month: 'month',
        year: 'year'
      }
      return typeMap[this.queryParams.granularity] || 'date'
    },
    startDateOptions() {
      const options = {
        disabledDate: (time) => {
          if (this.queryParams.endDate) {
            const end = new Date(this.queryParams.endDate)
            const maxRange = this.getMaxRange()
            const minTime = new Date(end)
            minTime.setDate(minTime.getDate() - maxRange)
            return time > end || time < minTime
          }
          return false
        }
      }
      return options
    },
    endDateOptions() {
      const options = {
        disabledDate: (time) => {
          if (this.queryParams.startDate) {
            const start = new Date(this.queryParams.startDate)
            const maxRange = this.getMaxRange()
            const maxTime = new Date(start)
            maxTime.setDate(maxTime.getDate() + maxRange)
            return time < start || time > maxTime
          }
          return false
        }
      }
      return options
    }
  },
  methods: {
    /** 查询表 */
    getList() {
      this.loading = true
      // TODO: 调用接口获取数据
      setTimeout(() => {
        this.loading = false
        this.typeList = [
          {
            name: '测试类型1',
            createTime: '2024-01-01'
          }
        ]
        this.total = 1
      }, 500)
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        name: '1',
        granularity: 'month', // 重置时也默认选择月
        startDate: undefined,
        endDate: undefined
      }
      this.handleQuery()
    },
    /** 导出按钮操作 */
    handleExport() {
      this.$confirm('是否确认导出所有数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true;
        
        try {
          // 生成模拟数据
          const mockData = [
            ['时间', '用电量 (KW·h)', '冷量 (RT)', 'EER'],
            ['2024-01-01 00:00:00', '120', '500', '4.8'],
            ['2024-01-01 01:00:00', '115', '480', '4.6'],
            ['2024-01-01 02:00:00', '125', '520', '4.9'],
            ['2024-01-01 03:00:00', '118', '490', '4.7'],
            ['2024-01-01 04:00:00', '122', '510', '4.8'],
            ['2024-01-01 05:00:00', '130', '540', '5.0'],
            ['2024-01-01 06:00:00', '128', '530', '4.9'],
            ['2024-01-01 07:00:00', '135', '560', '5.1'],
            ['2024-01-01 08:00:00', '140', '580', '5.2'],
            ['2024-01-01 09:00:00', '145', '600', '5.3']
          ]

          // 转换为CSV字符串
          let csvContent = '\ufeff'; // 添加 BOM 以支持中文
          mockData.forEach(row => {
            csvContent += row.join(',') + '\n';
          });

          // 创建下载链接
          const encodedUri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvContent);
          const link = document.createElement('a');
          link.setAttribute('href', encodedUri);
          link.setAttribute('download', `空调能效数据_${this.activeMall}_${new Date().toLocaleDateString()}.csv`);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);

          this.loading = false;
          this.$message.success('导出成功');
        } catch (error) {
          this.loading = false;
          this.$message.error('导出失败');
          console.error('Export error:', error);
        }
      }).catch(() => {
        this.loading = false;
      });
    },
    getMaxRange() {
      const rangeMap = {
        day: 30,    // 日粒度最多选择30天
        month: 12,  // 月粒度最多选择12个月
        year: 4     // 年粒度最多选择4年
      }
      return rangeMap[this.queryParams.granularity] || 30
    }
  }
}
</script>

<style lang="scss" scoped>
.search-form {
  width: 100%;

  .form-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .left-items {
    display: flex;
    flex-wrap: wrap;
    flex: 1;

    // 调整表单项之间的间距
    .el-form-item {
      margin-right: 24px;  // 普通间距
      
      &.date-item {
        margin-left: 36px;  // 为时选器添加左边距
      }
      
      &:last-child {
        margin-right: 0;
      }
    }
  }

  .right-buttons {
    display: flex;
    align-items: flex-start;
    margin-left: 16px;
  }
}

// 日期选择器样式
.date-separator {
  padding: 0 5px;
  color: #606266;
}

.el-date-picker {
  margin-right: 10px;
}

// 按钮间距
.el-button + .el-button {
  margin-left: 8px;
}

// 移除不需要的样式
.float-right,
.search-buttons,
.search-items {
  display: none;
}

// 移除自定义导出按钮的样式
.export-btn,
.export-icon,
.custom-icon {
  display: none;
}

// 按钮间距
.el-button + .el-button {
  margin-left: 8px;
}

.content-wrapper {
  display: flex;
  gap: 20px;
  height: calc(100% - 60px);
  width: 100%;
}

.left-panel {
  width: 400px;
  height: 100%;
  overflow-y: auto;
}

.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  
  .chart-wrapper {
    position: relative;
    background: rgba(6, 24, 50, 0.8);
    border-radius: 8px;
    padding: 20px;
    height: 400px;
    width: 100%;
  }
}

.indicator-card {
  background: linear-gradient(180deg, #0A2E5C 0%, #061832 100%);
  border-radius: 8px;
  padding: 24px;
  color: white;
  
  .title {
    width: 80px;
    height: 22px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: bold;
    font-size: 15px;
    color: #FFFFFF;
    line-height: 22px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 20px;
  }

  .model-wrapper {
    position: relative;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 24px 0;

    .base-image {
      width: 100%;
      max-width: 300px;
      height: auto;
    }

    .value {
      position: absolute;
      top: 28%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 48px;
      font-weight: bold;
      color: #00E1FF;
      text-shadow: 0 0 10px rgba(0, 225, 255, 0.5);
      z-index: 2;
    }
  }

  .stats {
    margin-top: 24px;
    
    .stat-item {
      display: flex;
      align-items: center;
      height: 56px;
      
      &.gradient-bg {
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          left: -24px;
          right: -24px;
          top: 0;
          height: 56px;
          background: linear-gradient(
            90deg, 
            rgba(2,31,79,0) 0%, 
            #009CFF 48%, 
            #009CFF 49%, 
            rgba(2,31,79,0) 100%
          );
          opacity: 0.6;
          z-index: 1;
        }
        
        .label, .value {
          position: relative;
          z-index: 2;
          display: flex;
          align-items: center;
          height: 100%;
        }
        
        .label {
          width: 120px;
          font-size: 20px;
          color: #FFFFFF;
        }

        .value {
          font-size: 16px;
          color: #FFFFFF;
          margin-left: 5px;
        }
      }

      & + .gradient-bg {
        margin-top: 7px;
      }
    }
  }
}

.evaluation-card {
  background: linear-gradient(180deg, #0A2E5C 0%, #061832 100%);
  border-radius: 8px;
  padding: 24px;
  color: white;
  margin-top: 20px;
  
  .title {
    width: 80px;
    height: 22px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: bold;
    font-size: 15px;
    color: #FFFFFF;
    line-height: 22px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 20px;
  }

  .evaluation-content {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .evaluation-item {
      display: flex;
      align-items: center;
      height: 28px;
      position: relative;
      padding: 0 20px;

      &:nth-child(1) {
        width: 280px;
        background: rgba(0,221,243,0.3);
        border-radius: 0px;
        border: 1px solid;
        border-image: linear-gradient(90deg, rgba(0, 221, 255, 0.89), rgba(0, 255, 255, 1)) 1;
        clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
      }

      &:nth-child(2) {
        width: 260px;
        background: rgba(0,156,236,0.3);
        border-radius: 0px;
        border: 1px solid;
        border-image: linear-gradient(90deg, rgba(0, 194, 255, 0.89), rgba(0, 148, 255, 0.89)) 1;
        clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
      }
      &:nth-child(3) {
        width: 240px;
        background: rgba(38,223,148,0.3);
        border-radius: 0px 0px 0px 0px;
        border: 1px solid;
        border-image: linear-gradient(90deg, rgba(71, 218, 155, 1), rgba(3, 229, 141, 1)) 1 1;
        clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
      }
      &:nth-child(4) {
        width: 220px;
        background: rgba(223,194,28,0.3);
        border-radius: 0px 0px 0px 0px;
        border: 1px solid;
        border-image: linear-gradient(90deg, rgba(224, 194, 25, 1), rgba(202, 192, 132, 1)) 1 1;
        clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
      }
      &:nth-child(5) {
        width: 200px;
        background: rgba(227,115,9,0.3);
        border-radius: 0px 0px 0px 0px;
        border: 1px solid;
        border-image: linear-gradient(90deg, rgba(227, 151, 9, 1), rgba(227, 116, 9, 1)) 1 1;
        clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
      }

      .label {
        position: relative;
        z-index: 1;
        font-size: 16px;
        color: #FFFFFF;
        margin-right: 8px;
      }
      
      .value {
        position: relative;
        z-index: 1;
        font-size: 14px;
        color: #FFFFFF;
        opacity: 0.8;
      }
    }
  }
}

.analysis-card {
  background: linear-gradient(180deg, #0A2E5C 0%, #061832 100%);
  border-radius: 8px;
  padding: 24px;
  color: white;
  margin-top: 20px;
  
  .title {
    width: 80px;
    height: 22px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: bold;
    font-size: 15px;
    color: #FFFFFF;
    line-height: 22px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 20px;
  }

  .analysis-content {
    font-size: 14px;
    color: #FFFFFF;
    line-height: 1.5;
    opacity: 0.8;
  }
}

.peak-valley-info {
  background: rgba(6, 24, 50, 0.8);
  border-radius: 8px;
  padding: 20px;
  color: white;
  
  .info-title {
    margin: 0 0 16px;
    font-size: 16px;
  }
  
  .info-content {
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
  }
}

.test-type-container {
  width: 100%;
  min-height: 100vh;
  padding: 20px;
  background: #061832;
  display: flex;
  flex-direction: column;

  ::v-deep .el-tabs {
    &.el-tabs--card {
      > .el-tabs__header {
        border-bottom: none;
        margin-bottom: 20px;

        .el-tabs__nav {
          border: none;
          background: transparent;
        }

        .el-tabs__item {
          border: none;
          color: #fff;
          background: rgba(6, 24, 50, 0.8);
          margin-right: 4px;
          height: 36px;
          line-height: 36px;
          border-radius: 4px;

          &.is-active {
            background: #1890ff;
            color: #fff;
          }

          &:not(.is-active):hover {
            color: #1890ff;
          }
        }
      }
    }
  }
}

.content-wrapper {
  flex: 1;
  display: flex;
  gap: 20px;
}

.left-panel {
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  
  .chart-wrapper {
    position: relative;
    background: rgba(6, 24, 50, 0.8);
    border-radius: 8px;
    padding: 20px;
    height: 400px;
    width: 100%;
  }
}
</style> 